<template>
    <div class="person">
        <h1>中国</h1>
        <h2 ref="title">北京</h2>
        <button @click="showLog">点击输出h2这个元素</button>
    </div>
</template>

<script lang="ts" setup name="Person">
    import {ref,defineExpose} from "vue"
    let title=ref()

    let a=ref(0)
    let b=ref(1)
    let c=ref(2)
    const showLog=()=>{
      console.log(title.value);
    }

    defineExpose({a,b,c})
</script>

<style scoped>
.person {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}
li{
    font-size: 20px;
}
button{
    margin: 0 10px;
}
</style>